<template>
	<view class="store-detail-container">
		<!-- 自定义页头 -->
		<view class="custom-header">
			<!-- 第一行：空白布局区域 -->
			<view class="banner-spacer"></view>
			
			<!-- 第二行：导航栏 -->
			<view class="nav-bar">
				<image class="back-icon" src="/static/images/icon_back_light@3x.png" mode="aspectFit" @click="goBack"></image>
				<image class="title-icon" src="/static/images/利行租买车白.png" mode="aspectFit"></image>
				<image class="tagline-icon" src="/static/images/无套路有保障白.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 公司信息卡片 -->
			<view class="company-info-card">
				<!-- 左侧公司信息 -->
				<view class="company-info-left">
					<text class="company-name">{{ companyName }}</text>
					<text class="company-address">{{ companyAddress }}</text>
				</view>
				
				<!-- 右侧公司图片 -->
				<view class="company-image-container">
					<image class="company-image" :src="companyImage" mode="aspectFill"></image>
				</view>
			</view>
			
			<!-- 车辆列表区域 -->
			<view class="vehicle-list-section">
				<text class="section-title">租车</text>
				
				<!-- 车辆卡片列表 -->
				<view class="vehicle-cards-list">
					<view 
						v-for="vehicle in vehicleList" 
						:key="vehicle.id" 
						class="vehicle-card"
						@click="goToCarRentalPlan(vehicle)"
					>
						<!-- 第一行：图片和车辆信息 -->
						<view class="vehicle-info-row">
							<!-- 左侧图片 -->
							<view class="vehicle-image-container">
								<image 
									v-if="vehicle.image" 
									:src="vehicle.image" 
									class="vehicle-image" 
									mode="aspectFill"
									@click.stop="previewImage(vehicle.image)"
								></image>
								<view v-else class="vehicle-image-placeholder">
									<text class="placeholder-text">暂无图片</text>
								</view>
							</view>
							
							<!-- 右侧车辆信息 -->
							<view class="vehicle-details">
								<!-- 第一行：车辆名称 -->
								<text class="vehicle-name">{{ vehicle.name }}</text>
								
								<!-- 第二行：型号 -->
								<text class="vehicle-model">{{ vehicle.model }}</text>
								
								<!-- 第三行：数据展示 -->
								<text class="vehicle-specs">{{ vehicle.specs }}</text>
							</view>
						</view>
						
						<!-- 分割线 -->
						<view class="divider"></view>
						
						<!-- 第二行：价格信息 -->
						<view class="vehicle-price-row">
							<text class="vehicle-price">{{ vehicle.price }}元/月起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部咨询按钮 -->
		<view class="bottom-consult-container" v-if="!showConsultModal">
			<view class="consult-button" @click="showConsultPopup">
				<text class="consult-button-text">咨询商家</text>
			</view>
		</view>
		
		<!-- 咨询弹框 -->
		<uni-popup ref="consultPopup" type="bottom" :mask-click="true" :z-index="2000" @maskClick="closeConsultPopup">
			<view class="consult-modal">
				<!-- 第一行：顾问信息 -->
				<view class="consult-header">
					<view class="consult-info">
						<text class="consult-title">利行租车顾问为您服务</text>
						<view class="service-features">
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">1对1答疑</text>
							</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">车型推荐</text>
							</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">优惠咨询</text>
							</view>
						</view>
					</view>
					<image class="consult-avatar" src="https://app-1306761403.cos.accelerate.myqcloud.com/06d400f0-3875-43a6-b8f9-3664a0e45f6b.png" mode="aspectFit"></image>
				</view>
				
				<!-- 第二行：输入卡片 -->
				<view class="consult-form-card">
					<!-- 手机号输入 -->
					<view class="phone-input-row">
						<text class="input-label">您的手机号</text>
						<view class="input-wrapper">
							<input class="phone-input" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
							<uni-icons v-if="phoneNumber" type="closeempty" size="20" color="#999" @click="clearPhoneNumber"></uni-icons>
						</view>
					</view>
					
					<!-- 隐私说明 -->
					<text class="privacy-text">
						为了您的信息安全，手机号将以虚拟号的形式给到管家，详细规则查看
						<text class="privacy-link">《电话销售说明》</text>
					</text>
					
					<!-- 立即咨询按钮 -->
					<view class="consult-submit-button" @click="submitConsult">
						<text class="submit-button-text">立即咨询</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getStoreCarInfoList } from '@/api/index/index.js';

export default {
	name: 'StoreDetail',
	data() {
		return {
			storeId: '',
			companyName: '',
			companyAddress: '',
			companyImage: '/static/images/company-placeholder.jpg',
			phoneNumber: '',
			showConsultModal: false,
			vehicleList: [
				{
					id: 1,
					image: '',
					name: '荣威 Ei5',
					model: '2019款 Ei5网约版纯电动',
					specs: '纯电动 | 续航400km | 轴距2665mm',
					price: 4680
				},
				{
					id: 2,
					image: '',
					name: '比亚迪 D1',
					model: '2021款 D1网约版纯电动',
					specs: '纯电动 | 续航400km | 轴距2665mm',
					price: 5300
				},
				{
					id: 3,
					image: '',
					name: '丰田 雷凌双擎',
					model: '2019款雷凌双擎1.8-CVT进取版油电混合(国VI)',
					specs: '油电混合 | 续航400km | 轴距2665mm',
					price: 5300
				},
				{
					id: 4,
					image: '',
					name: '吉利 帝豪EV',
					model: '2020款 帝豪EV网约版纯电动',
					specs: '纯电动 | 续航450km | 轴距2650mm',
					price: 4200
				},
				{
					id: 5,
					image: '',
					name: '北汽 EU5',
					model: '2021款 EU5网约版纯电动',
					specs: '纯电动 | 续航416km | 轴距2670mm',
					price: 4800
				},
				{
					id: 6,
					image: '',
					name: '广汽 Aion S',
					model: '2020款 Aion S网约版纯电动',
					specs: '纯电动 | 续航510km | 轴距2750mm',
					price: 5800
				}
			]
		}
	},
	onLoad(options) {
		console.log('store-detail onLoad 被调用了，参数:', options);
		
		// 从路由参数获取门店ID
		if (options.storeId) {
			this.storeId = options.storeId;
			console.log('设置 storeId:', this.storeId);
		} else if (options.merchantId) {
			this.storeId = options.merchantId;
			console.log('设置 merchantId 为 storeId:', this.storeId);
		} else if (options.companyId) {
			this.storeId = options.companyId;
			console.log('设置 companyId 为 storeId:', this.storeId);
		} else {
			console.log('未找到有效的ID参数，跳过接口调用');
		}
		
		// 从路由参数获取公司信息（兼容旧版本）
		if (options.companyName) {
			this.companyName = decodeURIComponent(options.companyName);
		}
		if (options.companyAddress) {
			this.companyAddress = decodeURIComponent(options.companyAddress);
		}
		if (options.companyImage) {
			this.companyImage = decodeURIComponent(options.companyImage);
		}
		
		// 调用接口获取门店车辆信息
		if (this.storeId) {
			console.log('onLoad 中调用接口，storeId:', this.storeId);
			this.fetchStoreCarInfoList();
		} else {
			console.log('onLoad 中 storeId 不存在，跳过接口调用');
		}
	},
	onShow() {
		console.log('store-detail onShow 被调用了');
		console.log('当前 storeId:', this.storeId);
		// 页面显示时调用接口
		if (this.storeId) {
			console.log('storeId 存在，调用接口');
			this.fetchStoreCarInfoList();
		} else {
			console.log('storeId 不存在，跳过接口调用');
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		// 获取门店车辆信息列表
		fetchStoreCarInfoList() {
			console.log('fetchStoreCarInfoList 方法被调用了');
			
			const params = {
				merchantId: this.storeId
			};
			
			console.log('调用门店车辆信息接口参数:', params);
			
			// 调用接口
			getStoreCarInfoList(params).then(res => {
				console.log('门店车辆信息接口返回数据:', res);
				
				if (res && res.success && res.data) {
					const storeData = res.data;
					
					// 更新公司信息
					this.companyName = storeData.enterpriseName || '';
					this.companyAddress = storeData.enterpriseAddress || '';
					this.companyImage = storeData.logoUrl ? `https://your-image-domain.com/${storeData.logoUrl}` : '/static/images/company-placeholder.jpg';
					
					// 更新车辆列表
					if (storeData.carInfos && storeData.carInfos.length > 0) {
						this.vehicleList = storeData.carInfos.map((car, index) => ({
							id: car.carId || index + 1,
							image: car.carImg || '',
							name: `${car.brand} ${car.model}`,
							model: car.modelYearDesc || '',
							specs: `${car.energyType} | 续航${car.mileage}km | 轴距${car.wheelbase}mm`,
							price: car.minMonthlyRent || 0,
							carId: car.carId,
							brand: car.brand,
							energyType: car.energyType,
							monthlyRentStart: car.monthlyRentStart
						}));
					}
				}
			}).catch(error => {
				console.error('获取门店车辆信息失败:', error);
				// 保持原有假数据作为默认值
			});
		},
		
		// 预览图片
		previewImage(imageUrl) {
			if (!imageUrl) {
				uni.showToast({
					title: '暂无图片',
					icon: 'none'
				});
				return;
			}
			
			uni.previewImage({
				urls: [imageUrl],
				current: imageUrl
			});
		},
		
		// 跳转到租车方案页面
		goToCarRentalPlan(vehicle) {
			// 先删除两层页面（当前页面 + 上一页），然后跳转到目标页面
			uni.navigateBack({
				delta: 2,
				success: () => {
					uni.navigateTo({
						url: `/pages/driver-life/car-rental-plan?carId=${vehicle.carId}&carName=${encodeURIComponent(vehicle.name)}&carImage=${encodeURIComponent(vehicle.image)}&carDescription=${encodeURIComponent(vehicle.model)}&carPrice=${encodeURIComponent(vehicle.price + '元/月起')}&fromStoreDetail=true`
					});
				}
			});
		},
		
		// 显示咨询弹框
		showConsultPopup() {
			this.showConsultModal = true;
			this.$refs.consultPopup.open();
		},
		
		// 关闭咨询弹框
		closeConsultPopup() {
			this.showConsultModal = false;
			this.$refs.consultPopup.close();
		},
		
		// 清空手机号
		clearPhoneNumber() {
			this.phoneNumber = '';
		},
		
		// 提交咨询
		submitConsult() {
			if (!this.phoneNumber) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			
			// 验证手机号格式
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.phoneNumber)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			// 构建提交数据
			const submitData = {
				phoneNumber: this.phoneNumber,
				companyName: this.companyName // 使用当前商家名称作为意向商家
			};
			
			console.log('提交咨询数据:', submitData);
			
			// 这里可以调用实际的咨询接口
			// 暂时使用模拟提交
			uni.showLoading({
				title: '提交中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				
				// 清空手机号并关闭弹框
				this.phoneNumber = '';
				this.closeConsultPopup();
			}, 1500);
		}
	}
}
</script>

<style scoped>
.store-detail-container {
	min-height: 100vh;
	background-color: #7b7a7f;
	position: relative;
}

/* 自定义页头 */
.custom-header {
	position: relative;
	z-index: 10;
}

.banner-spacer {
	height: 100rpx;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: transparent;
	margin: 0 20rpx;
}

.back-icon {
	width: 40rpx;
	height: 40rpx;
}

.title-icon {
	width: 200rpx;
	height: 40rpx;
}

.tagline-icon {
	width: 180rpx;
	height: 30rpx;
}

/* 主要内容区域 */
.main-content {
	background-color: #f1f2f6;
	border-radius: 20rpx 20rpx 0 0;
	margin-top: 20rpx;
	min-height: calc(100vh - 200rpx);
	padding: 0;
}

/* 公司信息卡片 */
.company-info-card {
	display: flex;
	padding: 30rpx;
	background-color: #f1f2f6;
}

.company-info-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: 20rpx;
}

.company-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.company-address {
	font-size: 28rpx;
	color: #666;
}

.company-image-container {
	width: 30%;
	height: 120rpx;
}

.company-image {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

/* 车辆列表区域 */
.vehicle-list-section {
	padding: 30rpx;
	background-color: #f1f2f6;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: inline-block;
	position: relative;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(to right, #fff, #22c8b9);
}

/* 车辆卡片列表 */
.vehicle-cards-list {
	padding: 0 0 200rpx 0;
}

.vehicle-card {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}

/* 第一行：图片和车辆信息 */
.vehicle-info-row {
	display: flex;
	margin-bottom: 20rpx;
}

.vehicle-image-container {
	width: 30%;
	margin-right: 20rpx;
}

.vehicle-image {
	width: 100%;
	height: 120rpx;
	border-radius: 8rpx;
}

.vehicle-image-placeholder {
	width: 100%;
	height: 120rpx;
	background-color: #f0f0f0;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vehicle-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.vehicle-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.vehicle-model {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 8rpx;
}

.vehicle-specs {
	font-size: 24rpx;
	color: #333;
}

/* 分割线 */
.divider {
	height: 1rpx;
	background-color: #eee;
	margin: 20rpx 0;
}

/* 第二行：价格信息 */
.vehicle-price-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.vehicle-price {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff5c43;
}

.placeholder-text {
	font-size: 24rpx;
	color: #999;
}

/* 底部咨询按钮 */
.bottom-consult-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx 40rpx;
	z-index: 1000;
}

.consult-button {
	background-color: #02dcad;
	border-radius: 50rpx;
	padding: 24rpx 0;
	text-align: center;
}

.consult-button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

/* 咨询弹框样式 */
.consult-modal {
	background: linear-gradient(to right, #01DFAA, #13B09F);
	border-radius: 20rpx 20rpx 0 0;
	padding: 0;
	z-index: 2000;
}

.consult-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10rpx 30rpx 0rpx 30rpx;
}

.consult-info {
	flex: 1;
	margin-right: 20rpx;
	margin-top: 30rpx;
}

.consult-title {
	color: #015B49;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.service-features {
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.feature-icon {
	width: 24rpx;
	height: 24rpx;
}

.feature-text {
	color: #015B49;
	font-size: 28rpx;
}

.consult-avatar {
	width: 170rpx;
	height: 170rpx;
	flex-shrink: 0;
}

.consult-form-card {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
}

.phone-input-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	background-color: #f5f6fc;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
}

.input-label {
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
}

.input-wrapper {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: 20rpx;
}

.input-wrapper .uni-icons {
	padding: 10rpx;
	margin: -10rpx;
}

.phone-input {
	flex: 1;
	padding: 0;
	font-size: 28rpx;
	color: #333;
	background: transparent;
	border: none;
}

.privacy-text {
	color: #666;
	font-size: 24rpx;
	line-height: 1.5;
	margin-bottom: 10rpx;
}

.privacy-link {
	color: #01DFAA;
	text-decoration: underline;
}

.consult-submit-button {
	background: linear-gradient(to right, #01DFAA, #05D1BB);
	border-radius: 50rpx;
	padding: 24rpx 0;
	text-align: center;
	margin-top: 20rpx;
}

.submit-button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
}

/* 增加 uni-icons 的点击区域 */
.uni-icons {
	padding: 10rpx;
	margin: -10rpx;
	min-width: 40rpx;
	min-height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
